<template>
  <el-row :gutter="24">
    <el-col :lg="17" :xl="17">
      <el-card>
        <template #header>
          <div class="tit">
            <span>数据概览</span
            ><span class="time">数据更新：{{ newDate }}</span>
          </div>
        </template>
        <div class="dataCon dataCon-margin-top">
          <div class="dashboard-chart-item">
            <div id="oldContainer" ref="oldContainer" class="dashboard-chart-container" />
            <div class="chart-label">入住率 92%</div>
            <div class="chart-desc">本月较上月提升 3%</div>
          </div>
          <div class="dashboard-chart-item">
            <div id="bedContainer" ref="bedContainer" class="dashboard-chart-container" />
            <div class="chart-label">床位使用率 79%</div>
            <div class="chart-desc">空闲床位充足</div>
          </div>
          <div class="dashboard-chart-item">
            <div id="serveContainer" ref="serveContainer" class="dashboard-chart-container" />
            <div class="chart-label">服务单增长 8%</div>
            <div class="chart-desc">服务需求持续提升</div>
          </div>
          <div class="dashboard-chart-item">
            <div id="staffContainer" ref="staffContainer" class="dashboard-chart-container" />
            <div class="chart-label">员工满意度 97%</div>
            <div class="chart-desc">团队稳定高效</div>
          </div>
          <div class="dashboard-chart-item">
            <div id="moneyContainer" ref="moneyContainer" class="dashboard-chart-container" />
            <div class="chart-label">收入同比 +12%</div>
            <div class="chart-desc">运营状况良好</div>
          </div>
        </div>
        <!-- 运营小结横幅移入卡片内部 -->
        <div class="dashboard-summary-banner" style="margin-top: 24px;">
          <span class="summary-icon">📈</span>
          今日入住：<b>5</b> 人，退住：<b>2</b> 人，服务单：<b>38</b> 笔，满意度：<b>98%</b>
          <span class="summary-tip">| 祝大家身体健康，心情愉快！</span>
        </div>
      </el-card>
    </el-col>
    <el-col :lg="7" :xl="7">
      <el-card>
        <div class="care-intro-panel">
          <div class="dashboard-stats-row dashboard-stats-row-vertical">
            <div class="stat-card" v-for="item in statCards" :key="item.title">
              <div class="stat-icon" :style="{background: item.bg}">
                <span v-html="item.icon"></span>
              </div>
              <div class="stat-main">
                <div class="stat-value">{{ item.value }}</div>
                <div class="stat-title">{{ item.title }}</div>
                <div class="stat-desc">{{ item.desc }}</div>
            </div>
            </div>
          </div>
        </div>
      </el-card>
    </el-col>
  </el-row>
</template>

<script setup>
import { onMounted, computed, ref } from 'vue'

import * as echarts from 'echarts/core'
import {
  TooltipComponent,
  LegendComponent,
  GridComponent
} from 'echarts/components'
import { PieChart, LineChart } from 'echarts/charts'
import { CanvasRenderer } from 'echarts/renderers'
import useSettingStore from '@/store/modules/setColor'
import { getDateInfo, getMonthInfo } from '@/utils/date'
import {
  OLDMAN_NUM_A,
  OLDMAN_NUM_B,
  OLDMAN_NUM_C,
  BED_NUM_A,
  BED_NUM_B,
  BED_NUM_C,
  SERVE_NUM_A,
  SERVE_NUM_B,
  SERVE_NUM_C,
  STAFF_NUM_A,
  STAFF_NUM_B,
  STAFF_NUM_C,
  MONEY_NUM_A,
  MONEY_NUM_B,
  MONEY_NUM_C
} from '../constants'
import {
  getOldPieChartDataSet,
  getBedPieChartDataSet,
  getservePieChartDataSet,
  getStaffPieChartDataSet,
  getMoneyPieChartDataSet
} from '../index1'

const avatar = ref(
  'https://yjy-oss-videos.oss-accelerate.aliyuncs.com/grzxhz.jpg'
)
echarts.use([
  TooltipComponent,
  LegendComponent,
  PieChart,
  GridComponent,
  LineChart,
  CanvasRenderer
])

const store = useSettingStore()
const newDate = getDateInfo(new Date())
const chartColors = computed(() => store.chartColors)
// 获取父组件值、方法
defineProps({
  // 搜索对象
  baseData: {
    type: Object,
    default: () => ({})
  },
  roleListData: {
    type: String,
    default: ''
  }
})
// monitorChart
let oldContainer= null // 老人
let bedContainer= null // 床位
let serveContainer= null // 服务
let staffContainer= null // 员工
let moneyContainer= null // 收入
let countChart =null
// 老人数量
const oldNumData = ref(OLDMAN_NUM_A)
const bedNumData = ref(BED_NUM_A)
const serveNumData = ref(SERVE_NUM_A)
const staffNumData = ref(STAFF_NUM_A)
const moneyNumData = ref(MONEY_NUM_A)
const renderCountChart = () => {
  if (!oldContainer) {
    oldContainer = document.getElementById('oldContainer')
  }
  countChart = echarts.init(oldContainer)
  countChart.setOption(
    getOldPieChartDataSet((chartColors).value, oldNumData.value)
  )
}
// 床位数量
const bedCountChart = () => {
  if (!bedContainer) {
    bedContainer = document.getElementById('bedContainer')
  }
  countChart = echarts.init(bedContainer)
  countChart.setOption(
    getBedPieChartDataSet((chartColors).value, bedNumData.value)
  )
}
// 服务数量
const serveCountChart = () => {
  if (!serveContainer) {
    serveContainer = document.getElementById('serveContainer')
  }
  countChart = echarts.init(serveContainer)
  countChart.setOption(
    getservePieChartDataSet((chartColors).value, serveNumData.value)
  )
}
// 员工数量
const staffCountChart = () => {
  if (!staffContainer) {
    staffContainer = document.getElementById('staffContainer')
  }
  countChart = echarts.init(staffContainer)
  countChart.setOption(
    getStaffPieChartDataSet((chartColors).value, staffNumData.value)
  )
}
// 收入金额
const moneyCountChart = () => {
  if (!moneyContainer) {
    moneyContainer = document.getElementById('moneyContainer')
  }
  countChart = echarts.init(moneyContainer)
  countChart.setOption(
    getMoneyPieChartDataSet((chartColors).value, moneyNumData.value)
  )
}
const renderCharts = () => {
  renderCountChart()
  bedCountChart()
  serveCountChart()
  staffCountChart()
  moneyCountChart()
}

const showCare = ref(false)
const features = [
  '智能监测，守护每一位长者健康',
  '个性化服务，满足多样化需求',
  '数据可视化，管理决策更科学',
  '便捷预约，家属与老人沟通无障碍'
]
const featureIcons = [
  'el-icon-monitor',
  'el-icon-user',
  'el-icon-data-analysis',
  'el-icon-message'
]
const showFeatures = ref([false, false, false, false])
onMounted(() => {
  setTimeout(() => { showCare.value = true }, 300)
  features.forEach((_, i) => {
    setTimeout(() => { showFeatures.value[i] = true }, 800 + i * 350)
  })
})

onMounted(() => {
  // 3套数据3天出现一次
  const date = getMonthInfo(new Date())
  const num = (date.surplusDay + 1) % 3
  if (num === 1) {
    oldNumData.value = OLDMAN_NUM_A
    bedNumData.value = BED_NUM_A
    serveNumData.value = SERVE_NUM_A
    staffNumData.value = STAFF_NUM_A
    moneyNumData.value = MONEY_NUM_A
  } else if (num === 2) {
    oldNumData.value = OLDMAN_NUM_B
    bedNumData.value = BED_NUM_B
    serveNumData.value = SERVE_NUM_B
    staffNumData.value = STAFF_NUM_B
    moneyNumData.value = MONEY_NUM_B
  } else {
    oldNumData.value = OLDMAN_NUM_C
    bedNumData.value = BED_NUM_C
    serveNumData.value = SERVE_NUM_C
    staffNumData.value = STAFF_NUM_C
    moneyNumData.value = MONEY_NUM_C
  }
  renderCharts()
})
const announcements = [
  '温馨提示：请定期关注老人健康数据变化。',
  '系统公告：本月满意度调查已开启，欢迎参与！',
  '服务升级：智能床位监测功能已上线。'
]
const statCards = [
  {
    title: '本月新增老人',
    value: 23,
    desc: '环比增长 15%',
    bg: 'linear-gradient(135deg,#e6f9f6,#b2f2e9)',
    icon: '👴'
  },
  {
    title: '本月服务单',
    value: 120,
    desc: '环比增长 8%',
    bg: 'linear-gradient(135deg,#f7fcfa,#c3e6ff)',
    icon: '📝'
  },
  {
    title: '本月满意度',
    value: '98%',
    desc: '持续高位',
    bg: 'linear-gradient(135deg,#fffbe6,#ffe7ba)',
    icon: '😊'
  },
  {
    title: '活跃家属数',
    value: 56,
    desc: '环比增长 10%',
    bg: 'linear-gradient(135deg,#f0f5ff,#adc6ff)',
    icon: '👨‍👩‍👧‍👦'
  }
]
</script>

<style lang="scss" scoped>
.dashboard-chart-card {
  padding: 8px;

  :deep(.t-card__header) {
    padding-bottom: 24px;
  }

  :deep(.t-card__title) {
    font-size: 20px;
    font-weight: 500;
  }
}
.care-intro-panel {
  background: linear-gradient(135deg, #e6f9f6 0%, #f7fcfa 100%);
  border-radius: 16px;
  box-shadow: 0 4px 24px 0 #00b8a01a;
  padding: 14px 10px 10px 10px;
  min-height: 260px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}
.care-content { width: 100%; }
.care-title {
  font-size: 20px;
  font-weight: bold;
  color: #00b8a0;
  display: flex;
  align-items: center;
  margin-bottom: 8px;
  letter-spacing: 1px;
}
.heart-svg {
  width: 32px;
  height: 32px;
  margin-right: 8px;
  vertical-align: middle;
}
.heart {
  transform-origin: 50% 60%;
  animation: heartBeat 1.2s infinite;
}
@keyframes heartBeat {
  0%, 100% { transform: scale(1);}
  10%, 30% { transform: scale(1.18);}
  20%, 40% { transform: scale(0.92);}
  50% { transform: scale(1.1);}
  60%, 80% { transform: scale(1);}
}
.care-desc { color: #595959; font-size: 15px; line-height: 1.8; }
.care-features { margin: 8px 0 0 0; padding-left: 18px; }
.care-features li { margin-bottom: 2px; font-size: 15px; list-style: disc; }
.fade-slide-enter-active, .fade-slide-leave-active {
  transition: all 0.7s cubic-bezier(0.23, 1, 0.32, 1);
}
.fade-slide-enter-from, .fade-slide-leave-to {
  opacity: 0;
  transform: translateY(30px);
}
.fade-slide-enter-to, .fade-slide-leave-from {
  opacity: 1;
  transform: translateY(0);
}
.feature-fade-enter-active {
  transition: all 0.7s cubic-bezier(0.23, 1, 0.32, 1);
}
.feature-fade-enter-from {
  opacity: 0;
  transform: translateX(30px);
}
.feature-fade-enter-to {
  opacity: 1;
  transform: translateX(0);
}
.fade-in-enter-active {
  transition: opacity 1s cubic-bezier(0.23, 1, 0.32, 1);
}
.fade-in-enter-from {
  opacity: 0;
}
.fade-in-enter-to {
  opacity: 1;
}
.care-welcome, .care-thanks { animation: fadeInUp 1s; }
@keyframes fadeInUp { from { opacity: 0; transform: translateY(20px);} to { opacity: 1; transform: translateY(0);} }
.care-announcement { margin: 10px 0 0 0; }
.announcement-icon { color: #00b8a0; margin-right: 6px; }
.care-illustration { display: flex; justify-content: center; margin-top: 8px; }
.dataCon-margin-top {
  margin-top: 64px;
}
.dashboard-chart-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 188px;
  margin: 0 18px;
}
.dashboard-chart-container {
  width: 178px;
  height: 178px;
  margin: 0 auto;
}
.chart-label {
  font-size: 17px;
  color: #00b8a0;
  font-weight: bold;
  margin-top: 28px;
}
.chart-desc {
  font-size: 13px;
  color: #999;
  margin-top: 14px;
  text-align: center;
}
.dashboard-stats-row-vertical {
  flex-direction: column;
  gap: 18px;
  align-items: stretch;
}
.stat-card {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 8px 0 #00b8a01a;
  padding: 18px 22px 14px 22px;
  min-width: 0;
  display: flex;
  align-items: center;
  transition: box-shadow 0.2s;
}
.stat-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  margin-right: 14px;
}
.stat-main {
  flex: 1;
}
.stat-value {
  font-size: 22px;
  font-weight: bold;
  color: #00b8a0;
}
.stat-title {
  font-size: 15px;
  color: #595959;
  margin-top: 2px;
}
.stat-desc {
  font-size: 13px;
  color: #bfbfbf;
  margin-top: 2px;
}
</style>
